<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="common/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="echarts/echarts.min.js"></script>
    <script type="text/javascript" src="echarts/map/js/china.js"></script>
    <script type="text/javascript">
        $(function(){
            loadChinaMap();
        })

        function loadChinaMap() {

            var chart = echarts.init($("#myMap")[0]);
            var start = $("#start").val();
            var end = $("#end").val();
            title=start+"-"+end+"登录地区域分布图"
            if(start=="" && end==""){
                title="最近7天登录地区域分布图"
            }
            // alert(start+"***"+end)

            /*chart.setOption({
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],
                    //calculable : true
                },
                tooltip: {},
                /!*legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['数据']
                },*!/
                series: [{
                    name:"数据",
                    type: 'map',
                    map: 'china',
                    // data:data,
                    data:[
                        {name:"河南",value:200},
                        {name:"北京",value:1200},
                        {name:"南海诸岛",value:1500},
                        {name:"台湾",value:1500, visualMap: false},
                        {name:"澳门",value:1500},
                    ],
                    roam:true,

                }]
            });*/
            $.ajax({
                // url:"json/map.json"
                url:"chinaMap"
                ,dataType:"json"//期望服务器响应回来的数据类型是json；把响应回来的数据解析为json对象
                ,data:{"start":start,"end":end}
                ,success:function(data){
                    alert(data)
                    var jsonObj = JSON.parse(data);//把data解析为json对象
                    //data:是后台响应回来的数据，这个数据必须符合echart地图数据的格式要求
                    chart.setOption({
                        title:{
                            text:title
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['高','低'],
                            //calculable : true
                        },
                        tooltip: {},
                        /*legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['数据']
                        },*/
                        series: [{
                            name:"数据",
                            type: 'map',
                            map: 'china',
                            data:data,

                           /* data:[
                                {"name":"河南","value":200},
                                {name:"北京",value:1200},
                                {name:"南海诸岛",value:1500},
                                {name:"台湾",value:1500, visualMap: false},
                                {name:"澳门",value:1500},
                            ],*/
                            roam:true,

                        }]
                    });
                }
            })



            //点击某一个省份的时候，会显示该省的省级地图
            chart.on('click',function(param){
                loadProvinceMap(param)
            } );

            /*provinceChart.on("click",function(param){
                console.log(param)
                //参考：http://datav.aliyun.com/tools/atlas
            })*/



        }

        //省份地图需要的数组
        var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
        var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

        /*
        把加载省地图封装形成一个方法
         */
        function loadProvinceMap(param){
            var start = $("#start").val();
            var end = $("#end").val();
            // alert(start+"***"+end)
            var provinceChart=echarts.init($("#province")[0]);

                /*console.log("**************")
                console.log(param)
                console.log("**************")*/
                var province=provinces[provincesText.indexOf(param.name)];
                $.get('echarts/map/json/province/'+province+'.json', function (provinceJson) {
                    console.log(provinceJson)
                    echarts.registerMap(param.name, provinceJson);
                    //var chart = echarts.init(document.getElementById('myMap'));
                    /*chart.setOption({
                        series: [{
                            type: 'map',
                            map: param.name
                        }]
                    });*/
                    $.ajax({
                        url:"provinceMap",
                        data:{"province":param.name,"start":start,"end":end},
                        success:function(data){
                            provinceChart.setOption({
                                visualMap: {
                                    min: 0,
                                    max: 1500,
                                    left: 'left',
                                    top: 'bottom',
                                    text: ['高','低'],
                                    //calculable : true
                                },
                                tooltip: {},
                                /*legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data:['数据']
                                },*/
                                series: [{
                                    name:"数据",
                                    type: 'map',
                                    map: param.name,
                                    data:data,
                                    roam:true,
                                }]
                            });
                        }
                    })
                    /*provinceChart.setOption({
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['高','低'],
                            //calculable : true
                        },
                        tooltip: {},
                        /!*legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['数据']
                        },*!/
                        series: [{
                            name:"数据",
                            type: 'map',
                            map: param.name,
                            data:[
                                {name:"郑州市",value:200}
                            ],
                            roam:true,
                        }]
                    });*/
                });

        }
    </script>
</head>
<body>
    时间段:<input type="date" id="start"/>-<input type="date" id="end"/> <input type="button" value="查询" onclick="loadChinaMap()"/>
    <div id="myMap" style="width: 800px;height: 600px;"></div>
    <hr/>
    <div id="province" style="width: 800px;height: 600px;"></div>
</body>
</html>